<template>
	<gracePage headerBG="#f4f4f4">
		<view slot="gHeader">
			<view class="grace-header-body grace-relative main-bodybg-color">
				<text class="grace-header-icons your-icon iconxiangzuo font-size-34" style="" @tap="appFn.navigateBackFn"></text>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex py-1-5 px-3 text-center"><text class="grace-h4 font-size-36 text-center" style="font-size:36rpx;">评价中心</text></view>
				<!-- 消息按钮 -->
				<text class="grace-header-icons my-icons"></text>
			</view>
		</view>
		<view slot="gBody" class="grace-flex-v1" id="gBody">
			<scroll-view scroll-y class="grace-list grace-margin-top">
				<view v-if="goods.length == 0" class="mt-5">
					<graceEmptyNew>
						<view slot="img" class="empty-view">
							<!-- 请根据您的项目要求制作并更换为空图片 -->
							<image class="empty-img" mode="widthFix" src="/static/images/loding.png"></image>
						</view>
						<text slot="text" class="grace-text-small grace-gray">暂无订单可评论</text>
					</graceEmptyNew>
				</view>
				<view class="grace-list my-2 mx-2 grace-bg-white grace-tbr-large" v-else v-for="(goods, indexItem) in goods" :key="indexItem">
					<view class="p-2">
						<view class="grace-space-between pt-1 grace-border-b">
							<text class="grace-h5">订单信息</text>
						</view>
						<view class="grace-list-items pt-1">
							<view class="my-list-image ucenter-face grace-relative">
								<image class="my-list-image ucenter-face-image" :src="goods.goods_thumb" mode="widthFix"></image>
							</view>
							<view class="grace-list-body">
								<view class="grace-list-title">
									<text class="my-list-title-text grace-h4 grace-ellipsis">{{ goods.goods_name }}</text>
								</view>
								<view class="grace-list-title pb-1">
									<text class="my-list-title-text grace-black9 grace-text">{{ goods.goods_attr }}</text>
								</view>
								<view class="grace-space-between mt-1 grace-flex-vcenter">
									<text class="grace-h5 grace-red">￥{{ goods.goods_price }}</text>
									<text class="font-size-22 pr-2">x{{ goods.goods_number }}</text>
								</view>
							</view>
						</view>
						<view class="grace-flex-end">
							<view>
								<button type="primary" class="grace-button my-footer-button my-1 grace-tbr-large" plain="true" @click="gotoEvaluate(goods.order_id, goods)">
									评价
								</button>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '@/graceUI/components/gracePage.vue';
import graceEmptyNew from "@/graceUI/components/graceEmptyNew.vue";
export default {
	data() {
		return {
			cates: ['待评价', '已评价'],
			current: 1,
			scrollHeight: 500,
			goods: [],
			oneGoStatus:true
		};
	},
	onShow:function(e){
		  uni.$on("evaluateStatus", res => {
			  if(res.result === 1002){
				  this.goods = [];
				  this.__init();
			  }
			  // 清除监听
			  uni.$off('evaluateStatus');
		  })
	},
	onReady: function() {
		this.___init();
	},
	methods: {
		async ___init() {
			let options = {
				act: 'get_comment_goods',
				page: this.current
			};
			let data = await this.$HTTP.post('/api/api.php', options, { token: true });
			if (data.error) {
				return;
			}
			console.log('goods', data);
			this.goods = data;
		},
		// 前往退货/退款页面
		gotoEvaluate(recId, item) {
			// 阻止多次跳转
			if (this.oneGoStatus) {
				this.oneGoStatus = false;
				// 跳转页面
				uni.navigateTo({
					url: '/pages/order/orderAppraiseEvaluate/orderAppraiseEvaluate?&id=' + recId + '&item='+JSON.stringify(item),
					complete: () => {
						this.oneGoStatus = true;
					}
				});
			}
		}
	},
	components: { gracePage , graceEmptyNew}
};
</script>
<style>
page {
	background: #f4f4f4;
}
.my-list-image {
	width: 154rpx;
	height: 154rpx;
}

.my-list-title-text {
	display: block;
	line-height: 40rpx;
}
.my-footer-button {
	/* width: 139rpx; */
	height: 51rpx;
	padding: 0rpx 20rpx;
	line-height: 51rpx;
	font-size: 28rpx;
	text-align: center;
}
</style>
